<template>
  <view class="content">
    <view class="getMsg">
      <view @click="chooseStore">
        <view>卓悦中心ONE AVENUE店</view>
        <view><u-icon name="arrow-right"></u-icon></view>
      </view>
      <view>
        <view>取餐时间</view>
        <view @click="chooseTime">{{ getTime }}<u-icon name="arrow-right"></u-icon></view>
      </view>
      <view>
        <view>联系电话</view>
        <view><input type="number" maxlength="11" :value="phone" class="getphone" @blur="getPhone"
            placeholder="请填写手机号" />
          <view class="autoFillOut">自动填写</view>
        </view>
      </view>
    </view>
    <view class="getMsg getMain">
      <view class="selected">
        <view>脏脏王</view>
        <view>x{{ 1 }}</view>
        <view>￥{{ 18 }}</view>
      </view>
      <view class="selected">
        <view>脏脏王</view>
        <view>x{{ 1 }}</view>
        <view>￥{{ 18 }}</view>
      </view>
      <view>
        <view>乃雪卷</view>
        <view @click="getVIPpackaging" class="GreenLetter">超值购买优患券大礼包<u-icon name="arrow-right"></u-icon></view>
      </view>
      <view>
        <view>礼品卡</view>
        <view class="GreenLetter" @click="goCard">请选择<u-icon name="arrow-right"></u-icon></view>
      </view>
      <view class="priceView">总计￥{{ 36 }},实付<text>￥{{ 36 }}</text></view>
    </view>
    <view class="warning"><u-icon name="question-circle" color="#F7BE29"></u-icon>优患券不与满赠、满减活动共享</view>
    <view class="playWay">
      <view class="playWayTitle">支付方式</view>
      <view :class="balance != 0 ? 'balance' : 'balance underbalance'">
        <view>
          <u-icon name="rmb-circle-fill" color="#878789" size="45rpx"></u-icon>&nbsp; 余额支付（余额{{ 100018960 }}）
        </view>
        <view @click="changePlayWay(0)">{{ balance != 0 ? "" : "余额不足"
          }}
          <view :class="playWay ? 'round roundSelected' : 'round'"></view>
        </view>
      </view>
      <view class="balance">
        <view>
          <u-icon name="weixin-circle-fill" color="#7FB73A" size="45rpx"></u-icon>&nbsp; 微信支付
        </view>
        <view @click="changePlayWay(1)">
          <view :class="!playWay ? 'round roundSelected' : 'round'"></view>
        </view>
      </view>
    </view>
    <view class="remark">
      <view>备注</view>
      <view class="GreenLetter" @click="goremark">
        <view class="remark_contnet">
          {{ remark }}
        </view>

        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>
    <view class="remark_bottomView">
      <view>合计：<text>￥{{ 28.5 }}</text></view>
      <view>付款</view>
    </view>
    <!-- 弹窗部分 -->
    <u-popup :show="chooseTime_show" @close="closechooseTime_show" @open="openchooseTime_show">
      <view class="time_popup">
        <view class="time_popup_title"> 请选择取餐时间 </view>
        <view class="time_main">
          <view class="time_left">
            <scroll-view scroll-y style="height: 550rpx">
              <block v-for="(item, index) in time_left_List" :key="index">
                <view @click="change_left(index)" :class="
                    change_left_show == index
                      ? 'select_left time_left_item'
                      : 'time_left_item'
                  ">{{ item }}:00~{{ item + 2 }}:00</view>
              </block>
            </scroll-view>
          </view>
          <block v-for="(item, index) in time_left_List" :key="index">
            <view class="time_right" v-if="change_left_show == index">
              <view v-if="change_left_show == 0" @click="getChooseTime('now', '')">立即取餐</view>
              <view v-if="index != 0 || min <= 20 || item >= new Date().getHours()" @click="getChooseTime('20', item)">
                {{ item }} :20</view>
              <view v-if="
                  index != 0 || min + 10 <= 40 || item >= new Date().getHours()
                " @click="getChooseTime('40', item)">{{ item }}:40</view>
              <view @click="getChooseTime('20', item + 1)">{{ item + 1 }}:20</view>
              <view @click="getChooseTime('40', item + 1)">{{ item + 1 }}:40</view>
            </view>
          </block>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        chooseTime_show: false, //选择时间弹窗
        time_left_List: [], //zuo侧时间列表
        time_right_List: [], //右侧时间列表
        change_left_show: 0, //选择时间弹窗左侧选中
        min: new Date().getMinutes() + 30,

        playWay: true, //true余额支付，false微信支付
        balance: 10086, //余额
        store: "", //门店
        getTime: "立即取餐", //取餐时间
        phone: "15650460661", //联系电话
        remark: "点击填写备注", //备注
      };
    },
    methods: {
      changePlayWay(e) {
        if (e == 0 && this.playWay == true) {
          return;
        } else if (e == 1 && this.playWay == false) {
          return;
        } else {
          this.playWay = !this.playWay;
        }
      },
      goCard() {
        uni.navigateTo({
          url: "/pages/user/giftCard",
        });
      },
      chooseStore() {
        console.log("选择门店");
      },
      chooseTime() {
        console.log("选择时间");
        this.chooseTime_show = true;
      },
      openchooseTime_show() {
        console.log("打开弹窗");
      },
      closechooseTime_show() {
        this.chooseTime_show = false;
        console.log("关闭弹窗");
      },
      change_left(index) {
        //选择时间弹窗左侧选中
        this.change_left_show = index;
      },
      //右侧时间列表
      getMinutesList() {
        const time = new Date();
        let hour = time.getHours();
        const minutes = time.getMinutes();
        let nextMinutes = Math.ceil(minutes / 10) * 10;
        let nextTime = hour + ":" + nextMinutes;
        console.log(nextTime);

        const timeList = [time];
        while (hour < 22) {
          nextMinutes += 30;
          if (nextMinutes >= 60) {
            hour += 1;
            nextMinutes -= 60;
          }
          if (hour >= 22) {
            break;
          }
          const nextTime = `${hour}:${nextMinutes < 10 ? "0" : ""}${nextMinutes}`;
          timeList.push(nextTime);
        }
        this.time_right_List = timeList;
      },
      getChooseTime(e, item) {
        if (e == "now") {
          this.getTime = "立即取餐";
        } else {
          this.getTime = item + ":" + e;
        }
        this.chooseTime_show = false;
      },
      getPhone() {
        console.log(123465879);
        const reg = /^1[3-9]\d{9}$/;
        if (reg.test(this.phone)) {
          uni.showToast({
            title: "请填写正确的手机号码",
            duration: 1500,
            icon: "none",
          });
        }
      },
      getVIPpackaging() {
        uni.navigateTo({
          url: "/pages/order/VIPpackaging",
        });
      },
      goremark() {
        uni.navigateTo({
          url: "/pages/order/remark",
        });
      },
    },
    onShow() {
      const now = new Date();
      let hours = now.getHours();
      const minutes = now.getMinutes();
      let array = [];
      if (minutes > 30) {
        hours = hours + 1;
      }
      for (let index = hours; index < 22; index++) {
        array.push(index);
      }
      array = array.filter((item, index) => index % 2 === 0);
      this.time_left_List = array;
      if (uni.getStorageSync("remark")) {
        this.remark = uni.getStorageSync("remark");
      }
    },
    onLoad() {
      this.getMinutesList();
    },
  };
</script>

<style scoped>
  page {
    background-color: #f0f8fa;
    font-size: 28rpx;
  }

  .u-icon {
    transform: translateY(2rpx);
  }

  .content {
    height: 100%;
    padding: 0 4%;
    box-sizing: border-box;
  }

  .getMsg {
    background-color: #fff;
    /* padding: 0 20rpx; */
    box-sizing: border-box;
    margin-top: 35rpx;
  }

  .getMsg>view {
    height: 90rpx;
    display: flex;
    padding: 0 20rpx;
    /* margin: 0 20rpx; */
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #f1f1f1;
  }

  .getMsg>view>view:last-child {
    display: flex;
    align-items: center;
  }

  .autoFillOut {
    width: 130rpx;
    height: 40rpx;
    margin-left: 10rpx;
    text-align: center;
    color: #aeb939;
    border: 1rpx solid #aeb939;
  }

  .selected {
    border: none !important;
  }

  .selected>view:first-child {
    width: 250rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .selected>view:nth-child(2) {
    width: 100rpx;
    text-align: right;
  }

  .GreenLetter {
    color: #7fb73a;
  }

  .priceView {
    justify-content: right !important;
    align-items: center;
  }

  .priceView>text {
    font-size: 38rpx;
    font-weight: bold;
  }

  .warning {
    width: 100%;
    margin: 30rpx auto;
    display: flex;
    color: #f7be29;
    align-items: center;
  }

  .playWay {
    width: 100%;
    background-color: #fff;
  }

  .playWay>view {
    padding: 0 20rpx;
    display: flex;
    height: 90rpx;
    justify-content: space-between;
    align-items: center;
  }

  .balance>view {
    display: flex;
    align-items: center;
  }

  .balance {
    border-bottom: 2rpx solid #f1f1f1;
  }

  .round {
    height: 25rpx;
    width: 25rpx;
    border-radius: 50%;
    margin-left: 10rpx;
    border: 4rpx solid #878789;
    transform: translateY(4rpx);
  }

  .roundSelected {
    border: 4rpx solid #7fb73a;
    position: relative;
  }

  .roundSelected::after {
    content: "";
    height: 15rpx;
    width: 15rpx;
    border-radius: 50%;
    background-color: #7fb73a;
    position: absolute;
    /* inset: 0; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* 富矿方式禁用的样式 */
  .underbalance {
    color: #878789;
  }

  .getphone {
    width: 200rpx;
  }

  .time_popup {
    background-color: #eeeeee;
  }

  .time_popup_title {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    letter-spacing: 2rpx;
    color: #666666;
  }

  .time_main {
    height: 550rpx;
    display: flex;
    justify-content: space-between;
  }

  .time_left {
    width: 250rpx;
  }

  .time_left_item {
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
  }

  .time_right {
    width: 500rpx;
    background-color: #fff;
  }

  .time_right>view {
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
  }

  .select_left {
    background-color: #fff;
  }

  .remark {
    width: 100%;
    margin: 30rpx 0;
    background-color: #fff;
    display: flex;
    height: 90rpx;
    align-items: center;
    padding: 0 20rpx;
    box-sizing: border-box;
    justify-content: space-between;
  }

  .remark>view:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .remark_contnet {
    width: 350rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .remark_bottomView {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 0 0 0 30rpx;
    box-sizing: border-box;
  }

  .remark_bottomView>view:last-child {
    background-color: #adb838;
    color: #fff;
    height: 100rpx;
    width: 160rpx;
    text-align: center;
    line-height: 100rpx;
  }

  .remark_bottomView text {
    font-size: 32rpx;
  }
</style>